<html>
<body>
  <label id="label1">Test label</label>
  <div aria-label="aria label">Generic container</div>
  <div aria-labelledby="label1">Generic container with aria-labelledby</div>

  <div role="textbox" aria-label="aria label">Textbox</div>
  <div role="textbox" aria-labelledby="label1">Textbox with aria-labelledby</div>

  <div role="button" aria-label="aria label">Button</div>
  <div role="button" aria-labelledby="label1">Button with aria-labelledby</div>

  <input type="text" role="combobox" aria-activedescendant="option1" aria-label="aria label" aria-controls="listbox-for-input-1">
  <ul id="listbox-for-input-1" role="listbox">
    <li id="option1" role="option">Option 1</li>
    <li id="option2" role="option">Option 2</li>
  </ul>
  <input type="text" role="combobox" aria-activedescendant="option3" aria-labelledby="label1" aria-controls="listbox-for-input-2">
  <ul id="listbox-for-input-2" role="listbox">
    <li id="option3" role="option">Option 3</li>
    <li id="option4" role="option">Option 4</li>
  </ul>

  <div role="combobox" tabindex="0" aria-controls="listbox2" aria-label="aria label">Combobox</div>
  <ul id="listbox1" role="listbox">
    <li id="option5" role="option">Option 5</li>
    <li id="option6" role="option">Option 6</li>
  </ul>

  <div role="combobox" tabindex="0" aria-controls="listbox2" aria-labelledby="label1">Combobox with aria-labelledby</div>
  <ul id="listbox2" role="listbox">
    <li id="option7" role="option">Option 7</li>
    <li id="option8" role="option">Option 8</li>
  </ul>

  <input type="time" value="12:05" aria-label="aria label">
  <input type="time" value="12:05" aria-labelledby="label1">

  <input type="color" value="#e4e4e4" aria-label="aria label">
  <input type="color" value="#e4e4e4" aria-labelledby="label1">
</body>
</html>
